<template>
  <div class="home">
    <el-container>
      <el-header>
        <span> 电商后台管理系统 </span>
        <el-button @click="outLogin" type="info">退出</el-button>
      </el-header>
      <el-container>
        <el-aside :width="width + 'px'">
          <Aside @sendWidth="asseptWidth"/>
        </el-aside>
        <el-main v-if="$route.path === '/home/echarts'">
          <router-view />
        </el-main>
        <el-main v-else>
          <Breadcrumb />
          <!-- 卡片 -->
          <el-card class="box-card">
             <router-view />
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Aside from "../components/Aside.vue";
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
  name: "Home",
  data() {
    return {
      width: ""
    }
  },
  methods: {
    outLogin() {
      // 全部清除
      sessionStorage.clear();
      this.$router.push("/login");
    },
    // 接收子组件传递过来的宽度
    asseptWidth(width) {
      this.width = width
    }
  },
  components: {
    Aside,
    Breadcrumb,
  },
};
</script>

<style lang="scss">
.home {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-header {
  background-color: #373f41;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-left: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
}

.el-aside {
  background-color: rgb(51, 55, 68);
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.box-card {
  margin-top: 15px;
}
</style>
